<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="../include/tag.jsp"%>
<link rel="stylesheet" href="${ctx}/css/ui/form/jquery-ui.css">
<link rel="stylesheet" href="${ctx}/css/ui/gatherForm/create_form.css"/>
<fieldset class="border mb10">
    <legend>新增表单项</legend>
    <div class="form-inner">
        <div id="edit_template_items" class="event-create-sign-form"
             style="min-height: 518px; max-width: 70%; min-width:70%; float: left;">
            <div id="event_template_form_items" class="template_form_items" style="padding-top: 10px">
                <c:forEach var="field" items="${fields}" varStatus="status">
                    <div class="layui-form-item ${deleteStatus == true ? 'deleteStatus' : ''}" id="efi_${status.index}"
                        ${field != null && field.category == 'FIELD_RESOURCE' || field != null && field .category == 'FIELD_RESOURCELINK'? 'style="display: none;"' : ''}
                         data-id="${field.id}" data-type="${field.type}">
                        <div class="layui-inline">
                            <div class="layui-input-inline" style="width: 75px !important; height: 38px!important;">
                                <input type="hidden" name="items[${status.index}].id" value="${field.id}"/>
                                <input type="hidden" name="items[${status.index}].type" value="${field.type}"/>
                                <input type="hidden" name="items[${status.index}].sort" value="${field.sort}"/>
                                <input type="hidden" name="items[${status.index}].category" value="${field.category}"/>
                                <c:choose>
                                    <c:when test="${not empty field.required && field.required == 'true'}">
                                        <input type="checkbox" checked="checked" lay-skin="primary" name="items[${status.index}].required" title="必填" value="true"/>
                                    </c:when>
                                    <c:otherwise>
                                        <input type="checkbox" lay-skin="primary" name="items[${status.index}].required" title="必填" value="true"/>
                                    </c:otherwise>
                                </c:choose>
                            </div>
                            <c:choose>
                                <c:when test="${field.type == 'radio' || field.type == 'checkbox' || field.type == 'select' || field.type == 'image' || field.type == 'date'}">
                                    <div class="layui-input-inline" style="width: 73% !important;">
                                        <input type="text" class="layui-input" name="items[${status.index}].title" value="${field.title}" lay-verify="required"/>
                                    </div>
                                </c:when>
                                <c:otherwise>
                                    <div class="layui-input-inline" style="width: 130px !important;">
                                        <input type="text" class="layui-input" name="items[${status.index}].title" value="${field.title}" lay-verify="required"/>
                                    </div>
                                    <div class="layui-input-inline" style="width: 60% !important;">
                                        <input type="text" class="layui-input" name="items[${status.index}].description" value="${field.description}" placeholder="提示信息写在这里！"/>
                                    </div>
                                </c:otherwise>
                            </c:choose>
                            <c:if test="${deleteStatus == true}">
                                <div class="layui-input-inline" style="width: 50px !important;">
                                    <a onclick="removeEventFormItem(this)" href="javascript:void(0);" style="line-height: 35px">
                                        <i class="iconfont icon-delete btn-icon" style="font-size: 21px"></i>
                                    </a>
                                </div>
                            </c:if>
                            <div class="cl"></div>
                            <c:if test="${field.type == 'radio' || field.type == 'checkbox' || field.type == 'select'}">
                                <div class="options">
                                    <div class="event-create-sign-select" id="efis_${status.index}">
                                        <c:forEach var="option" items="${field.subitems}" varStatus="ss">
                                            <div class="sub-item" data-id="${option.id}">
                                                <input type="hidden" name="items[${status.index}].subitems[${ss.index}].id" value="${option.id}"/>
                                                <input type="hidden" name="items[${status.index}].subitems[${ss.index}].sort" value="${ss.count}"/>
                                                <div class="layui-input-inline sub-item-text">
                                                    <input type="text" class="layui-input" lay-verify="required" name="items[${status.index}].subitems[${ss.index}].name" value="${option.name}"/>
                                                </div>
                                                <c:if test="${deleteStatus == true}">
                                                    <span name="event_form_item_ctrl" class="icon-close-new" onclick="javascript:removeEventFormItemValue(this);"></span>
                                                </c:if>
                                            </div>
                                        </c:forEach>
                                        <button type="button" class="btn create-event-label" onclick="javascript:addEventFormItemValue('${status.index}', this, false)">
                                            <span name="event_form_item_ctrl" class="icon-event-label-add"></span>
                                        </button>
                                        <p class="cl" style="margin-bottom: 0px !important; display: block !important;"></p>
                                    </div>
                                </div>
                                <div class="cl"></div>
                            </c:if>
                            <c:if test="${field.type == 'image'}">
                                <div class="pic-attachment" style="display: flex">
                                    <div class="fb_componentBody" style="width: 200px;">
                                        <ul class="fbc_pictureAttachment">
                                            <li class="fbc_paItem">
                                                <div class="fbc_paImgPlaceholder"></div>
                                                <p class="fbc_paAddTitle">点击选择图片</p>
                                                    <%--<p class="fbc_paAddTips">（需小于2M）</p>--%>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="fb_component_setting" style="width: 400px;">
                                        <div class="setting-number">
                                            <div style="width: 170px">
                                                <c:choose>
                                                    <c:when test="${not empty field.isSetMultiple && field.isSetMultiple == 'true'}">
                                                        <input type="checkbox" lay-filter="setting_number" lay-skin="primary" name="items[${status.index}].isSetMultiple" title="允许上传多张照片" checked value="${field.isSetMultiple}"/>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <input type="checkbox" lay-filter="setting_number" lay-skin="primary" name="items[${status.index}].isSetMultiple" title="允许上传多张照片" value="${field.isSetMultiple}"/>
                                                    </c:otherwise>
                                                </c:choose>
                                            </div>
                                            <div class="setting-number-max" ${not empty field.isSetMultiple && field.isSetMultiple == 'true' ? '' : 'style="display: none"'}>
                                                <span>最多&nbsp;</span>
                                                <input type="number" class="layui-input" min="1" max="9" name="items[${status.index}].maxNumber" value="${field.maxNumber}" style="width: 80px; display: inline-block"/>
                                                <span>&nbsp;张 (最多9张)</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </c:if>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
        <div class="aside" id="edit_template_tools" style="max-width: 205px; float: right;">
            <h3>常用栏位</h3>
            <div class="event-create-sign-form-usual clearfix">
                <ul class="mr">
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormCommonItem(0);">
                            <span>姓名</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormCommonItem(1, false);">
                            <span>性别</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormCommonItem(2);">
                            <span>公司</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormCommonItem(3);">
                            <span>职位</span>
                        </button>
                    </li>
                </ul>
                <ul>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormCommonItem(4);">
                            <span>手机</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormCommonItem(5);">
                            <span>微信</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormCommonItem(6);">
                            <span>QQ</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormCommonItem(7);">
                            <span>邮箱</span>
                        </button>
                    </li>
                </ul>
            </div>
            <div class="event-create-sign-form-usual clearfix">
                <h3>自定义栏位</h3>
                <ul class="mr">
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(0);">
                            <span>单行文本框</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(1);">
                            <span>数字输入框</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(2, false);">
                            <span>日期选择框</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(6, false);">
                            <span>下拉选择框</span>
                        </button>
                    </li>
                </ul>
                <ul>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(3);">
                            <span>多行文本框</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(4, false);">
                            <span>单选按钮框</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(5, false);">
                            <span>多选按钮框</span>
                        </button>
                    </li>
                    <li>
                        <button type="button" class="btn" onclick="javascript:addEventFormEmptyItem(7, false);">
                            <span>图片附件</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="cl"></div>
</fieldset>
<script src="${ctx}/script/form/jquery-1.12.4.js"></script>
<script src="${ctx}/script/form/jquery-ui.js"></script>
<script>
    var form = null;
    $(function () {

        layui.use(['form', 'laydate'], function () {
            form = layui.form, laydate = layui.laydate;

            form.on('checkbox(setting_size)', function(data) {
                var $target = $($(data.elem)[0]);
                var checked = $target.prop("checked");
                if (checked) {
                    $target.closest(".setting-size").find(".setting-size-max").show();
                } else {
                    $target.closest(".setting-size").find(".setting-size-max").hide();
                    $target.closest(".setting-size").find(".setting-size-max").find("input").val("");
                }
                $target.val(checked);
            });

            form.on('checkbox(setting_number)', function(data) {
                var $target = $($(data.elem)[0]);
                var checked = $target.prop("checked");
                if (checked) {
                    $target.closest(".setting-number").find(".setting-number-max").show();
                } else {
                    $target.closest(".setting-number").find(".setting-number-max").hide();
                    $target.closest(".setting-number").find(".setting-number-max").find("input").val("");
                }
                $target.val(checked);
            });
        });

        // 拖拽排序
        $("#event_template_form_items").sortable({
            items : ".deleteStatus",
            placeholder: 'sortable-placeholder',
            opacity: 0.5,
            forcePlaceholderSize: true
        });
        $("#event_template_form_items").disableSelection();

        $(document).tooltip({
            items: "#event_template_form_items .deleteStatus",
            content: function () {
                return "拖动栏目排序";
            },
            position: {
                my: "left center",
                at: "left center",
                using: function (position, feedback) {
                    var $element = feedback.target.element;
                    if ($element.find(".sub-item").length > 0) {
                        position = {
                            left: 160,
                            top: position.top - feedback.target.element.find(".options").height() / 2 - 13
                        }
                    } else if ($element.find(".pic-attachment").length > 0) {
                        position = {
                            left: 160,
                            top: position.top - 100
                        }
                    } else {
                        position = {
                            left: 160,
                            top: position.top - 10
                        }
                    }
                    $(this).css(position);
                }
            }
        });
    });


    // 常用栏位JSON
    var formCommonItems = [
        {"Type": "input", "Category": "FIELD_REALNAME", "Required": false, "Title": "姓名", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "radio", "Category": "FIELD_GENDER", "Required": false, "Title": "性别", "Subitems": ["男", "女"], "Description": null, "Value": null, "TypeTitle": "单选按钮框"},
        {"Type": "input", "Category": "FIELD_COMPANY", "Required": false, "Title": "公司", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "input", "Category": "FIELD_OFFICE", "Required": false, "Title": "职位", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "tel", "Category": "FIELD_MOBILE", "Required": false, "Title": "手机", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "input", "Category": "FIELD_WX", "Required": false, "Title": "微信", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "qq", "Category": "FIELD_QQ", "Required": false, "Title": "QQ", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "email", "Category": "FIELD_EMAIL", "Required": false, "Title": "邮箱", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"}
    ];

    // 自定义栏位JSON
    var formEmptyItems = [
        {"Type": "input", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单行文本框"},
        {"Type": "number", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "数字输入框"},
        {"Type": "date", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "日期选择框"},
        {"Type": "textarea", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "多行文本框"},
        {"Type": "radio", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "单选按钮框"},
        {"Type": "checkbox", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "多选按钮框"},
        {"Type": "select", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "下拉选择框"},
        {"Type": "image", "Category": "", "Required": false, "Title": "", "Subitems": [], "Description": null, "Value": null, "TypeTitle": "图片附件"}
    ];

    // 添加选项
    function addEventFormItemValue(index, that, flag) {
        var itemsHtml = renderEventFormItemValues(index, that, flag);
        var parent = $(that).closest(".event-create-sign-select");
        var subItem = $(parent).find(".sub-item:last");
        if (subItem.length == 0) {
            var addBtn = $(parent).find(".create-event-label");
            $(addBtn).before(itemsHtml);
        } else {
            $(subItem).after(itemsHtml);
        }
    }

    // 拼接选项模板
    function renderEventFormItemValues(i, that, addNew, tmpItem) {
        var itemsHtml = '';
        if (tmpItem != undefined && tmpItem.Subitems != null && tmpItem.Subitems.length > 0) {
            for (var j = 0; j < tmpItem.Subitems.length; j++) {
                itemsHtml += '<div class="sub-item">';
                itemsHtml += '<div class="layui-input-inline sub-item-text">';
                itemsHtml += '<input type="hidden" name="items[' + i + '].subitems[' + j + '].sort" value="' + (j + 1) + '" />';
                itemsHtml += '<input type="text" class="layui-input" lay-verify="required" name="items[' + i + '].subitems[' + j + '].name" value="' + (tmpItem.Subitems[j] == null ? "" : tmpItem.Subitems[j]) + '"/>';
                itemsHtml += '</div>';
                itemsHtml += '<span name="event_form_item_ctrl" class="icon-close-new" onclick="javascript:removeEventFormItemValue(this);"></span>';
                itemsHtml += '</div>';
            }
        } else {
            j = $(that).closest(".event-create-sign-select").find(".sub-item").length;
            itemsHtml += '<div class="sub-item">';
            itemsHtml += '<input type="hidden" name="items[' + i + '].subitems[' + j + '].sort" />';
            itemsHtml += '<div class="layui-input-inline sub-item-text">';
            itemsHtml += '<input type="text" class="layui-input" lay-verify="required" name="items[' + i + '].subitems[' + j + '].name" />';
            itemsHtml += '</div>';
            itemsHtml += '<span name="event_form_item_ctrl" class="icon-close-new" onclick="javascript:removeEventFormItemValue(this);"></span>';
            itemsHtml += '</div>';
        }

        if (addNew == true) {
            itemsHtml += '<button type="button" class="btn create-event-label" onclick="javascript:addEventFormItemValue(' + i + ', this, false)">' +
                '<span name="event_form_item_ctrl" class="icon-event-label-add"></span></button>';
            itemsHtml += '<p class="cl" style="margin-bottom:0px!important; display:block!important;"></p>';
        }
        return itemsHtml;
    }

    // 创建栏位模板
    function createTemplateFormItem(item) {
        if (item == null)
            return null;
        var result = {
            Type: item.Type,
            Category: item.Category,
            Required: false,
            Title: item.Title,
            Description: item.Description,
            TypeTitle: item.TypeTitle,
            Subitems: new Array()
        };
        if (item.Subitems != null && item.Subitems.length > 0) {
            for (var i = 0; i < item.Subitems.length; i++) {
                result.Subitems.push(item.Subitems[i]);
            }
        }
        return result;
    }

    // 检查表单字段格式
    function checkField() {
        var flag = true;
        var length = $("#event_template_form_items .layui-form-item").length;
        if (length == 0) {
            util.layerMsgError("请添加要收集的信息字段");
            flag = false;
            return false;
        }

        $("#event_template_form_items .layui-form-item").each(
            function (i, i_ele) {
                var type = $(i_ele).find("input[type=hidden][name$=type]")
                    .val();
                if (type == "radio" || type == "checkbox"
                    || type == "select") {
                    length = $(i_ele).find(".sub-item").length;
                    if (length == 0) {
                        util.layerMsgError("请添加该字段的选项");
                        flag = false;
                        return false;
                    }
                } else if (type == 'image') {
                    var maxNum = $(i_ele).find(".setting-number-max").find("input").val();
                    if (maxNum > 9) {
                        util.layerMsgError("最多只能上传9张");
                        flag = false;
                        return false;
                    }
                }
            });

        return flag;
    }

    // 重置下标
    function resetIndex() {
        $("#event_template_form_items .layui-form-item").each(function (i, i_ele) {
            // 重置栏位
            $(i_ele).find(".layui-inline").children(".layui-input-inline").each(function (j, j_ele) {
                $(j_ele).find("[name^=items]").each(function (k, k_ele) {
                    var name = $(k_ele).attr("name");
                    var start = name.substring(0, name.indexOf("[") + 1);
                    var end = name.substring(name.indexOf("]"), name.length);
                    var newName = start + i + end;
                    $(k_ele).attr("name", newName);
                    if (name.indexOf("sort") != -1) {
                        $(k_ele).val(i + 1);
                    }
                });
            });

            // 重置上传图片索引
            $(i_ele).find(".layui-inline").find(".pic-attachment").each(function (j, atta) {
                $(atta).find("[name^=items]").each(function (k, k_ele) {
                    var name = $(k_ele).attr("name");
                    var start = name.substring(0, name.indexOf("[") + 1);
                    var end = name.substring(name.indexOf("]"), name.length);
                    var newName = start + i + end;
                    $(k_ele).attr("name", newName);
                    if (name.indexOf("sort") != -1) {
                        $(k_ele).val(i + 1);
                    }
                });
            });

            // 重置选项
            $(i_ele).find(".layui-inline .event-create-sign-select").children(".sub-item").each(function (j, j_ele) {
                $(j_ele).find("[name^=items]").each(function (k, k_ele) {
                    var name = $(k_ele).attr("name");
                    var start = name.substring(0, name.indexOf("[") + 1);
                    var end = name.substring(name.indexOf("]"), name.length);
                    var newName = start + i + end;
                    $(k_ele).attr("name", newName);
                    name = $(k_ele).attr("name");
                    start = name.substring(0, name.lastIndexOf("[") + 1);
                    end = name.substring(name.lastIndexOf("]"), name.length);
                    newName = start + j + end;
                    $(k_ele).attr("name", newName);
                    if (name.indexOf("sort") != -1) {
                        $(k_ele).val(j + 1);
                    }
                });
            });
        });
    }

    // 删除栏位
    function removeEventFormItem(that) {
        var item = (that).closest(".layui-inline").closest(".layui-form-item");
        var length = $(item).find(".sub-item").length;
        if (length > 0) {
            $(item).find(".sub-item").each(function (index, ele) {
                removeEventFormItemValue(ele);
            });
        }

        var fieldId = $(item).attr("data-id");

        function cb() {
            $(item).remove();
        }

        if (fieldId == "") {
            cb();
        } else {
            $.ajax({
                type: 'post',
                url: '${ctx}/gatherForm/form/deleteField.do',
                data: {
                    id: fieldId
                },
                dataType: 'json',
                context: $('body'),
                success: function (data) {
                    cb();
                },
                error: function (xhr, type) {
                    console.err('err', 'ajax错误', xhr, type);
                }
            })
        }
    }

    // 删除选项
    function removeEventFormItemValue(that) {
        var item = $(that).closest(".sub-item");
        var optionId = $(item).attr("data-id");

        function cb() {
            $(item).remove();
        }

        if (optionId == "") {
            cb();
        } else {
            $.ajax({
                type: 'post',
                url: '${ctx}/gatherForm/form/deleteOption.do',
                data: {
                    id: optionId
                },
                dataType: 'json',
                context: $('body'),
                success: function (data) {
                    cb();
                },
                error: function (xhr, type) {
                    console.err('err', 'ajax错误', xhr, type);
                }
            })
        }
    }

    // 添加常用栏位
    function addEventFormCommonItem(index, showPlaceholder) {
        if (formCommonItems != null && formCommonItems.length > index
            && index >= 0) {
            var commonItem = formCommonItems[index];
            if (commonItem != null) {
                renderEventFormTemplate(createTemplateFormItem(commonItem), showPlaceholder);
            }
        }
    }

    // 添加自定义栏位
    function addEventFormEmptyItem(index, showPlaceholder) {
        if (formEmptyItems != null && formEmptyItems.length > index
            && index >= 0) {
            var emptyItem = formEmptyItems[index];
            if (emptyItem != null) {
                if (emptyItem.Type == 'image') {
                    var length = $("[data-type='image']").length;
                    if (length == 1) {
                        util.layerMsgError("已经添加了图片附件栏位，不能再添加");
                        return false;
                    }
                }
                renderEventFormTemplate(createTemplateFormItem(emptyItem), showPlaceholder);
            }
        }
    }

    // 拼接模板
    function renderEventFormTemplate(tmpItem, showPlaceholder) {
        if (!util.isValid(showPlaceholder)) {
            showPlaceholder = true;
        }
        var index = $("#event_template_form_items .layui-form-item").length;
        var itemsHtml = "";
        var title = tmpItem.Title == "" ? tmpItem.TypeTitle : tmpItem.Title;
        itemsHtml += '<div class="layui-form-item deleteStatus" id="efi_' + index + '" data-id="" data-type="' + tmpItem.Type + '">';
        itemsHtml += '<div class="layui-inline">';
        itemsHtml += '<div class="layui-input-inline" style="width: 75px!important; height: 38px!important; ">';
        itemsHtml += '<input type="hidden" name="items[' + index + '].type" value="' + tmpItem.Type + '" />';
        itemsHtml += '<input type="hidden" name="items[' + index + '].sort" value="' + tmpItem.Sort + '" />';
        itemsHtml += '<input type="hidden" name="items[' + index + '].category" value="' + tmpItem.Category + '" />';
        itemsHtml += '<input type="checkbox" lay-skin="primary" name="items[' + index + '].required" title="必填" value="true" />';
        itemsHtml += '</div>';
        if (showPlaceholder) {
            itemsHtml += '<div class="layui-input-inline" style="width: 130px!important;">';
            itemsHtml += '<input type="text" class="layui-input" title="' + title + '" placeholder="' + title + '" name="items[' + index + '].title" value="' + title + '" lay-verify="required" />';
            itemsHtml += '</div>';
            itemsHtml += '<div class="layui-input-inline" style="width: 60%!important;">';
            itemsHtml += '<input type="text" name="items[' + index + '].description" class="layui-input" value="' + (tmpItem.Description == null ? "" : tmpItem.Description) + '" placeholder="提示信息写在这里！"/>';
            itemsHtml += '</div>';
        } else {
            itemsHtml += '<div class="layui-input-inline" style="width: 73%!important;">';
            itemsHtml += '<input type="text" class="layui-input" title="' + title + '" placeholder="' + title + '" name="items[' + index + '].title" value="' + title + '" lay-verify="required" />';
            itemsHtml += '</div>';
        }
        itemsHtml += '<div class="layui-input-inline" style="width: 50px!important;">';
        itemsHtml += '<a onclick="removeEventFormItem(this)" href="javascript:void(0);" style="line-height: 35px"><i class="iconfont icon-delete btn-icon" style="font-size: 21px"></i></a>';
        itemsHtml += '</div>';
        itemsHtml += '<div class="cl"></div>';

        if (tmpItem.Type == "radio" || tmpItem.Type == "checkbox" || tmpItem.Type == "select") {
            itemsHtml += '<div class="options">';
            itemsHtml += '<div class="event-create-sign-select" id="efis_' + index + '">';
            itemsHtml += renderEventFormItemValues(index, this, true, tmpItem);
            itemsHtml += '</div>';
            itemsHtml += '</div>';
            itemsHtml += '<div class="cl"></div>';
        }

        if (tmpItem.Type == "image") {
            itemsHtml += '<div class="pic-attachment" style="display: flex">';
            itemsHtml += '<div class="fb_componentBody" style="width: 200px;">';
            itemsHtml += '<ul class="fbc_pictureAttachment">';
            itemsHtml += '<li class="fbc_paItem">';
            itemsHtml += '<div class="fbc_paImgPlaceholder"></div>';
            itemsHtml += '<p class="fbc_paAddTitle">点击选择图片</p>';

            itemsHtml += '</li>';
            itemsHtml += '</ul>';
            itemsHtml += '</div>';
            itemsHtml += '<div class="fb_component_setting" style="width: 400px;">';

            itemsHtml += '<div class="setting-number">';
            itemsHtml += '<div style="width: 170px">';
            itemsHtml += '<input type="checkbox" lay-filter="setting_number" lay-skin="primary" name="items[' + index + '].isSetMultiple" title="允许上传多个文件"/>';
            itemsHtml += '</div>';
            itemsHtml += '<div style="display: none;" class="setting-number-max">';
            itemsHtml += '<span>最多&nbsp;</span>';
            itemsHtml += '<input type="text" class="layui-input" name="items[' + index + '].maxNumber" value="" style="width: 80px; display: inline-block"/>';
            itemsHtml += '<span>&nbsp;个</span>';
            itemsHtml += '</div>';
            itemsHtml += '</div>';
            itemsHtml += '</div>';
            itemsHtml += '</div>';
        }
        itemsHtml += '</div>';
        itemsHtml += '</div>';

        $("#event_template_form_items").append(itemsHtml);
        form.render('checkbox');
    }
</script>